/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from "@wordpress/i18n";

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import {
	useBlockProps,
	RichText,
	InspectorControls,
	InnerBlocks,
} from "@wordpress/block-editor";
import { PanelBody, RangeControl, ToggleControl } from "@wordpress/components";
/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import "./editor.scss";

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */

export default function Edit({ attributes, setAttributes }) {
	const { borderRadius, expand } = attributes;
	const accordionStyles = {
		"--accordion-border-radius": borderRadius + "px",
	};

	//设置圆角
	const onChangeBorderRadius = (val) => {
		setAttributes({ borderRadius: val });
	};
	//设置展开
	const onChangeExpand = () => {
		setAttributes({ expand: !expand });
	};

	//限定指定的块
	const ALLOWED_BLOCKS = [
		"core/heading",
		"core/paragraph",
		"core/image",
		"core/list",
	];

	return (
		<>
			<InspectorControls>
				<PanelBody title="手风琴设置">
					<RangeControl
						label="圆角"
						value={borderRadius}
						onChange={onChangeBorderRadius}
						min={1}
						max={100}
					/>
					<ToggleControl
						checked={expand}
						help="手风琴将在加载时展开"
						label="展开"
						onChange={onChangeExpand}
					/>
				</PanelBody>
			</InspectorControls>

			<div {...useBlockProps({ style: accordionStyles })}>
				<details open={expand ? true : false}>
					{
						//__("这里添加手风琴内容", "accordion")
					}

					<summary>
						<RichText
							value={attributes.title}
							onChange={(val) => setAttributes({ title: val })}
							placeholder="请输入手风琴标题"
						/>
					</summary>
					<span>
						<InnerBlocks allowedBlocks={ALLOWED_BLOCKS} />
					</span>
				</details>
			</div>
		</>
	);
}
//<RichText
//	value={attributes.content}
//	onChange={(val) => setAttributes({ content: val })}
//	placeholder="请输入内容"
///>;
